<template>
    <div>
        <Breadcrumb>
            <Breadcrumb-item href="/">
                <Icon type="ios-home-outline"></Icon> 用户管理
            </Breadcrumb-item>
            <Breadcrumb-item href="">
                <Icon type="social-buffer-outline"></Icon> 修改密码
            </Breadcrumb-item>
        </Breadcrumb>
        <!-- <canvas ref="canvas" width="400" height="400"></canvas> -->
        <Form ref="formValidate"   :label-width="80" style="margin-top: 20px;">
            <FormItem label="昵称">
                <Input v-model="formItem.nick" placeholder="昵称" style="width: 200px;"></Input>
            </FormItem>
            <FormItem label="头像">
                <Upload name="image" :action="action_url" :format="['jpg', 'jpeg', 'png']" :on-format-error="handleFormatError"
                    :on-success="handleSuccess" :headers="header" :show-upload-list="false">
                    <Button icon="ios-cloud-upload-outline">上传文件</Button>
                </Upload>
            </FormItem>
            <FormItem>
                <img v-show="formItem.avatar" :src="baseImgeUrl + formItem.avatar" style="width: 100px;height: 100px;">
            </FormItem>
            <FormItem label="新密码">
                <Input v-model="formItem.password" type="text" placeholder="不修改则留空" style="width: 200px;"></Input>
            </FormItem>
            <FormItem>
                <Button type="primary" @click="handleSubmit('formValidate')">保存</Button>
            </FormItem>
        </Form>
    </div>
</template>
<script>
import config from "@/config";
import { getToken } from "../../libs/util";
const baseUrl = process.env.NODE_ENV === "development" ? config.baseUrl.dev : config.baseUrl.pro;
const baseImgeUrl = process.env.NODE_ENV === "development" ? config.baseImgUrl.dev : config.baseImgUrl.pro;
console.log(baseImgeUrl);
export default {
    data() {
        return {
            //图片上传
            action_url: baseUrl + "/admin/image/uploadImg",
            baseImgeUrl: baseImgeUrl,
            header: { token: getToken() },
            formItem: {
                id: "0",
                nick: "",
                avatar: "",
                password: "",
            }
        }
    },
    methods: {
        getUserInfo() {
            this.$axios('/admin/user/getUserInfo', {}).then(res => {
                this.formItem = res;
                localStorage.setItem('userInfo',JSON.stringify(res))
            })
        },
        handleSubmit() {
            this.$axios('/admin/user/setUserInfo', this.formItem).then(res => {
                this.$Message.success('保存成功');
                this.getUserInfo();
            })
        },
        //图片类型错误
        handleFormatError(file) {
            this.$Notice.warning({
                title: "文件格式错误",
                desc: "不支持该文件类型",
            });
        },
        //banner图或视频
        handleSuccess(res, file) {
            console.log(res);
            let src = res.data.src;
            let ext = res.data.ext;
            this.formItem.avatar = src;
        },
    },
    created() {
        this.getUserInfo();
    },
}
</script>
<style>
.demo-upload-list {
    display: inline-block;
    width: 60px;
    height: 60px;
    text-align: center;
    line-height: 60px;
    border: 1px solid transparent;
    border-radius: 4px;
    overflow: hidden;
    background: #fff;
    position: relative;
    box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
    margin-right: 4px;
}

.demo-upload-list img {
    width: 100%;
    height: 100%;
}

.demo-upload-list-cover {
    display: none;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, .6);
}

.demo-upload-list:hover .demo-upload-list-cover {
    display: block;
}

.demo-upload-list-cover i {
    color: #fff;
    font-size: 20px;
    cursor: pointer;
    margin: 0 2px;
}
</style>